<!--The content below is only a placeholder and can be replaced.-->

<div class="container">
  <div class="row">
    <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <img width="300" alt="Angular Logo" src="">
    </div>
    <h2>Here are some links to help you start: </h2>
    <ul>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
      </li>
    </ul>
  </div>
  <hr />
  <div class="row">
    <router-outlet></router-outlet>
  </div>
  <div class="row">
    <button class="btn btn-outline-info" type="button" (click)="doOnClick($event)">{{title}}</button>
  </div>
  <hr />
  <div class="row">
    <input type="text" placeholder="Please enter what your want to say." class="form-control" (input)="doOnInput($event)" value="default value" />
  </div>
  <hr />
  <div class="row">
    <table class="table table-striped table-bordered">
      <tr>
        <th>id</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>1</td>
        <td>gainorloss</td>
        <td>25</td>
      </tr>
      <tr>
        <td [attr.colspan]="tdRowSpan">{{tdRowSpanTxt}}</td>
      </tr>
    </table>
  </div>
  <hr />
  <div class="row">
    <div [class]="divClass">凤凰新华</div>
  </div>
  <hr />
  <div class="row">
    <div [class.bg-primary]="isEnv">凤凰新华</div>
  </div>
  <hr />
  <div class="row">
    <div [ngClass]="divClasses">凤凰新华</div>
  </div>
  <hr />
  <div class="row">
    <div [style.color]="divStyle">凤凰新华</div>
  </div>
  <hr />
  <div class="row">
    <div [ngStyle]="divStyles">凤凰新华</div>
  </div>
  <hr />
  <div class="row">
    <input type="text" name="name" [(ngModel)]="value" />
    <p>{{value}}</p>
  </div>
  <hr />
  <div class="row">
    <div class="col-md-9">
      <input type="text" name="name" [formControl]="keywordInput" />
    </div>
    <p class="col-md-3">
      {{keyword}}
    </p>
  </div>
  <hr />
  <div class="row">
    <h5>Pipeline</h5>
    <div class="col-md-12">
      <ul class="list-group">
        <li class="list-group-item">
          date:{{pipelineData.date|date:'yyyy-MM-dd HH:mm:ss'}}
        </li>
        <li class="list-group-item">
          num:{{pipelineData.num|number:'1.2-4'}}
          <br />
          num:{{pipelineData.num|discount:'0.5'}}
        </li>
        <li class="list-group-item">
          string: {{pipelineData.string|uppercase}}
          <br />
          string: {{pipelineData.string|lowercase}}
        </li>
      </ul>
    </div>
  </div>
</div>
<hr />
<div class="container">
  <div class="row">
    <p> &copy; 凤凰新华 版权所属 翻版必究</p>
    <p class="text-danger">&hearts;&hearts;&hearts;&hearts;&hearts;</p>
    <p class="text-warning">
      Please give 5 hearts &hellip;&hellip;&hellip;&hellip;&hellip;&hellip;
    </p>
  </div>
</div>

